<template>
  <div class="onsiteInspeceBox">
    <div id="onsiteInspece" ref="onsiteInspece" style="width:200px;height:225px;"></div>
    <div class="trem_box">
      <div style="padding: 0 15px 0 10px;">
        <div class="count">3</div>
        <div style="display:flex;">
          <div class="point"></div>
          <div class="tip">已巡检</div>
        </div>
      </div>
      <div style="border-left: 1px solid #E4E4E4;padding-left: 15px;">
        <div class="count">4</div>
        <div style="display:flex;">
          <div class="daixun"></div>
          <div class="tip">待巡检</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "onsiteInspece",
  data() {
    return {};
  },
  created() {

  },
  mounted() {
    this.initInspeceCharts();
  },
  methods: {
    initInspeceCharts() {
      let myCharts = this.$echarts.init(this.$refs.onsiteInspece);
      // 指定图表的配置项和数据
      myCharts.setOption({
        title: {
          zlevel: 0,
          text: [
            "7", '总数',
          ].join('\n'),
          top: '19.7%',
          left: '48.2%',
          textAlign: 'center',
          textStyle: {
            fontSize: 14, //字体大小
            color: "black" //字体颜色
          }
        },
        tooltip: {
          trigger: "item"
        },
        textStyle: {
          fontSize: 14, //字体大小
          color: "#ffffff" //字体颜色
        },
        grid: {
          y: 15,
          y2: 100,
        },

        series: [
          {
            // name: "访问来源",
            type: "pie",
            radius: ["40%", "50%"],
            center: ['50%', '26%'],
            avoidLabelOverlap: true,
            startAngle: 270,
            itemStyle: {
              borderRadius: 10,
              // borderColor: "#fff",
              borderWidth: 1,
              color: function (params) {
                //自定义颜色
                var colorList = ['#4DDC61', '#FFCB26'];
                return colorList[params.dataIndex]
              },

            },
            label: {
              show: false,
              position: "right"
            },
            labelLine: {
              length: 30,
              show: true,
            },
            data: [
              {
                value: 3,
                name: "已巡检",
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: '#9EF96C' },
                      { offset: 1, color: '#3AD65F' }
                    ],
                    globalCoord: true // 缺省为 false
                  }
                },
              },
              {
                value: 4,
                name: "待巡检",
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: '#FFCB26' },
                      { offset: 1, color: '#ffda62' }
                    ],
                    globalCoord: true // 缺省为 false
                  }
                },
              },
            ]
          }

        ]

      })
      // 使用刚指定的配置项和数据显示图表。
      myCharts.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }
  }
};
</script>
<style scoped>
.onsiteInspeceBox {
  position: relative;
}

#onsiteInspece {
  z-index: 999;
}

.trem_box {
  display: flex;
  position: absolute;
  bottom: 38px;
  left: 15px;
  /* background: linear-gradient(129deg, #FFCB26 0%, #ffda62 100%); */
}

.point {
  margin-top: 6px;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: linear-gradient(129deg, #8ceb57 0%, #3ad65f 100%);
}

.daixun {
  margin-top: 6px;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: linear-gradient(129deg, #FFCB26 0%, #ffda62 100%);
}

.count {
  font-size: 20px;
}

.tip {
  font-size: 14px;
  color: #a4a5a6;
  margin: 2px 0 0 5px;
}
</style>